<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name='viewport' content="width=device-width,initial-scale=1.0,user-scalable=no"/>
<script src="../../static/vConsole-3.1.0/dist/vconsole.min.js"></script>
<script src='../vue.js'></script>
<script>
    var vConsole = new VConsole();
</script>
</head>
<body>

    <ul id='example-1'>
        <li v-for='item in items'>
            {{ item.message }}
        </li>
	    <template v-for="item in items">
	    	<li>{{ item.message }}</li>
	    	<li class="divider">*****</li>
	    </template>
    </ul>

    <ul id='example-2'>
        <li v-for='(item, index) in items'>
            {{ parentMessage }} - {{ index }} - {{ item.message }}
        </li>
        <div>
              <span v-for="n in 10">{{ n }} </span>
        </div>
    </ul>
	<div id="todo-list-example">
	  <input
		v-model="newTodoText"
		v-on:keyup.enter="addNewTodo"
		placeholder="Add a todo"
	  >
	  <ul>
		<li
		  is="todo-item"
		  v-for="(todo, index) in todos"
		  v-bind:key="todo.id"
		  v-bind:title="todo.title"
		  v-on:remove="todos.splice(index, 1)"
		></li>
	  </ul>
  </div>
  <div id="example-3">
    <button v-on:click="warn('Form cannot be submitted yet.', $event)">
      Submit
    </button>
  </div>

  <div id="example-cmpnt1">
    <my-component></my-component>
  </div>

  <div id="example-cmpnt2">
    <my-component></my-component>
  </div>

  <div id='example-cmpnt3'>
    <child :my-message="parentMsg"></child>
  </div>

  <div id='example-cmpnt4'>
    <todo-item2 v-bind='todo'></todo-item2>
  </div>

  <div id='example-cmpnt5'>
    <example :prop-a='1.365'></example>
  </div>

  <div id='example-cmpnt6'>
    <!-- 非prop属性会出现在组件根元素的属性内，如<span myprop='123'> -->
    <example2 myprop='123'></example2>
    <comp :foo.sync='bar'></comp>
  </div>

<script>
// console.log(Vue)
var example1 = new Vue({
    el: '#example-1',
    data: {
        items: [
            {message: 'Foo'},
            {message: 'Bar'}
        ]
    }
})

var example2 = new Vue({
    el: '#example-2',
    data: {
        parentMessage: 'Parent',
        items: [
            { message: 'Foo' },
            { message: 'Bar' }
        ]
    }
})

Vue.component('todo-item', {
  template: '\
    <li>\
      {{ title }}\
      <button v-on:click="$emit(\'remove\')">X</button>\
    </li>\
  ',
  props: ['title']
})

new Vue({
  el: '#todo-list-example',
  data: {
    newTodoText: '',
    todos: [
      {
        id: 1,
        title: 'Do the dishes',
      },
      {
        id: 2,
        title: 'Take out the trash',
      },
      {
        id: 3,
        title: 'Mow the lawn'
      }
    ],
    nextTodoId: 4
  },
  methods: {
    addNewTodo: function () {
      this.todos.push({
        id: this.nextTodoId++,
        title: this.newTodoText
      })
      this.newTodoText = ''
    }
  }
})

new Vue({
  el: '#example-3',
  methods: {
    warn: function (message, event) {
    // 现在我们可以访问原生事件对象
    if (event) event.preventDefault()
    alert(message)
  }
  } 
})

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})
new Vue({
  el: '#example-cmpnt1'
})

new Vue({
  el: '#example-cmpnt2',
  components: {
    'my-component': {template: '<div>A local custom component!</div>'}
  }
})

Vue.component('child', {
  // 在 JavaScript 中使用 camelCase
  props: ['myMessage'],
  template: '<span>{{ myMessage }}</span>'
})

new Vue({
  el: '#example-cmpnt3',
  data: {
    parentMsg: `it's parentMsg`
  }
}) 

Vue.component('todo-item2', {
  props: ['text', 'isComplete'],
  template: '<span>{{text}} {{isComplete}}</span>'
})

new Vue({
  el: '#example-cmpnt4',
  data: {
    todo: {
      text: 'Learn Vue',
      isComplete: false
    }
  }
})

Vue.component('example', {
  template: '<span>{{propA}}</span>',
  props: {
    // 基础类型检测 (`null` 指允许任何类型)
    propA: Number,
    // // 可能是多种类型
    // propB: [String, Number],
    // // 必传且是字符串
    // propC: {
    //   type: String,
    //   required: true
    // },
    // // 数值且有默认值
    // propD: {
    //   type: Number,
    //   default: 100
    // },
    // // 数组/对象的默认值应当由一个工厂函数返回
    // propE: {
    //   type: Object,
    //   default: function () {
    //     return { message: 'hello' }
    //   }
    // },
    // 自定义验证函数
    // propF: {
    //   validator: function (value) {
    //     return value > 10
    //   }
    // }
  }
})

new Vue({
  el: '#example-cmpnt5',
  data: {
  }
})

Vue.component('example2',{
  template: '<span></span>'
})

Vue.component('comp', {
  template: '<button @click="update(250)">{{foo}}</button>', //组件同时也是vue的实例，所以可以在template中使用v-以及data、methods
  props: ['foo'],
  methods: {
    update: function(newValue){
      this.$emit('update:foo', newValue)
    }
  }
})

var vm2 = new Vue({
  el: '#example-cmpnt6',
  data: {
    bar: 0
  }
})


</script>
</body>
</html>
